<template>
	<view class="content">
		<view class="header-bg">
			<image src="/static/bg/buying_bg.png" mode="widthFix" />
		</view>
		<view class="container">
			<swiper class="card-swiper" :circular="true"
			  duration="500" @change="cardSwiper"
				>
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFill"></image>
						<view class="card-text flex justify-between align-center">
							<view class="card-1" v-show="index==0">注册送有效会员</view>
							<view class="card-2" v-show="index==1"><text class="text-sm">￥</text>398</view>
							<view class="card-3" v-show="index==2"><text class="text-sm">￥</text>3000</view>
							<text>有效期：永久有效</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<swiper class="privilege-section" :style="'height:'+swiperHeight+'px;'" duration="500" :circular="true" :disable-touch="true" :current="cardCur">
				<swiper-item>
					<view class="section-content content-0">
						<view class="section-title flex align-center justify-center">
							<image src="/static/icon/headline.png"/>
							<text>会员权益</text>
							<image src="/static/icon/headline.png"/>
						</view>
						<view class="section-list flex align-center" v-for="(item,index) in privilege1" :key="index">
							<image :src="item.url" />
							<view class="list-text">
								<view class="list-title">{{ item.title }}</view>
								<text>{{ item.text }}</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="section-content content-1">
						<view class="section-title flex align-center justify-center">
							<image src="/static/icon/headline2.png"/>
							<text>会员权益</text>
							<image src="/static/icon/headline2.png"/>
						</view>
						<view class="section-list flex align-center" v-for="(item,index) in privilege2" :key="index">
							<image :src="item.url" />
							<view class="list-text">
								<view class="list-title">{{ item.title }}</view>
								<text>{{ item.text }}</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="section-content content-2">
						<view class="section-title flex align-center justify-center">
							<image src="/static/icon/headline3.png"/>
							<text>会员权益</text>
							<image src="/static/icon/headline3.png"/>
						</view>
						<view class="section-list flex align-center" v-for="(item,index) in privilege3" :key="index">
							<image :src="item.url" />
							<view class="list-text">
								<view class="list-title">{{ item.title }}</view>
								<text>{{ item.text }}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="footer-btn flex aling-center">
				<view class="footer-left">
					<view class="price">
						<text>￥</text>
						{{ cardCur==2?'3000':'398' }}
					</view>
					<text>升级为妙街{{ cardCur==2?'店长':'导购' }}</text>
				</view>
				<view class="footer-center"></view>
				<view class="footer-right" @click="goSuper">
					立即升级
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			cardCur: 0,
			swiperList: [
				{id: 0, url: '/static/image/super-1.png'},
				{id: 1, url: '/static/image/super-2.png'},
				{id: 2, url: '/static/image/super-3.png'}
			],
			cardIndex: 0,
			swiperHeight: 0,
			sectionClass: '.content-0',
			privilege1: [
				{id: 0, url: '/static/icon/icon_members_redpacket.png', title: '抢红包', text: '自购有红包，转发赚红包'},
				{id: 1, url: '/static/icon/icon_members_shopping.png', title: '购物', text: '享受会员超低价购买商品'},
				{id: 2, url: '/static/icon/icon_members_bargaining.png', title: '砍价', text: '可以参加砍价获得红包'}
			],
			privilege2: [
				{id: 0, url: '/static/icon/icon_shoppers_red_packet.png', title: '抢红包', text: '自购有红包，转发赚红包'},
				{id: 1, url: '/static/icon/icon_shoppers_shopping.png', title: '购物', text: '享受会员超低价购买商品'},
				{id: 2, url: '/static/icon/icon_shoppers_bargaining.png', title: '砍价', text: '可以参加砍价获得红包'},
				{id: 3, url: '/static/icon/icon_shoppers_package.png', title: '大礼包', text: '购买级别即送大礼包产品'},
				{id: 4, url: '/static/icon/icon_shoppers_prize.png', title: '分享奖', text: '分享有奖励，分享越多，收益越多'},
				{id: 5, url: '/static/icon/icon_shoppers_directdrive.png', title: '直推收益', text: '直推会员赚的多你的收益就更多，实现躺赚'},
				{id: 6, url: '/static/icon/icon_shoppers_taste.png', title: '品鉴卡', text: '获得12个月品鉴新品特权，免费包邮到家'},
			],
			privilege3: [
				{id: 0, url: '/static/icon/icon_manager_red_packet.png', title: '抢红包', text: '自购有红包，转发赚红包'},
				{id: 1, url: '/static/icon/icon_manager_shopping.png', title: '购物', text: '享受会员超低价购买商品'},
				{id: 2, url: '/static/icon/icon_manager_bargaining.png', title: '砍价', text: '可以参加砍价获得红包'},
				{id: 4, url: '/static/icon/icon_manager_prize.png', title: '分享奖', text: '分享有奖励，分享越多，收益越多'},
				{id: 5, url: '/static/icon/icon_manager_directdrive.png', title: '直推收益', text: '直推会员赚的多你的收益就更多，实现躺赚'},
				{id: 6, url: '/static/icon/icon_manager_taste.png', title: '品鉴卡', text: '获得12个月品鉴新品特权，免费包邮到家'},
				{id: 7, url: '/static/icon/icon_manager_allowance.png', title: '销售津贴', text: '获得销售津贴奖励'},
				{id: 8, url: '/static/icon/icon_manager_advertisingrevenue.png', title: '广告收益', text: '发布视频赚广告费，天天到账'}
			]
		};
	},

	onLoad() {
		
	},
	onReady() {
		this.getHeight()
	},
	methods: {
		goSuper(){
			uni.navigateTo({
				url:'/pages/super/list'
			})
		},
		getHeight() {
			var view = uni.createSelectorQuery().select(this.sectionClass);
			view.boundingClientRect(data => {
				//console.log(data.height)
				this.swiperHeight = data.height + 150
			}).exec();
		},
		cardSwiper(e) {
			this.cardCur = e.detail.current
			this.sectionClass = '.content-' + e.detail.current
			this.getHeight()
		},
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	min-height: 100vh;
	.header-bg{
		margin-top: -90upx;
		image{
			width: 100%;
		}
	}
	.container{
		margin-top: -220upx;
		.card-swiper{
			.swiper-item{
				position: relative;
				.card-text{
					position: absolute;
					bottom: 0;
					width: 100%;
					padding: 15px 25px;
					font-size: 24upx;
					color: #fff;
					.card-1{
						color: #5A77BF;
					}
					.card-2{
						color: #CF9008;
						font-size: 64upx;
					}
					.card-3{
						color: #FFDE90;
						font-size: 64upx;
					}
				}
			}
		}
		.privilege-section{
			margin-top: -30upx;
			.section-content{
				padding: 0 30upx;
				.section-title{
					image{
						width: 38upx;
						height: 52upx;
					}
					text{
						color: #333;
						font-size: 36upx;
						padding: 0 20upx;
					}
				}
				.section-list{
					margin-top: 30upx;
					border-radius: 20upx;
					background: #fff;
					padding: 26upx 30upx;
					image{
						width: 88upx;
						height: 88upx;
					}
					.list-text{
						margin-left: 30upx;
						.list-title{
							font-size: 32upx;
							padding-bottom: 17upx;
						}
						text{
							font-size: 26upx;
							color: #999;
						}
					}
				}
			}
			
		}
	}
	.footer-btn{
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 120upx;
		.footer-left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30upx;
			width: 44%;
			background: #333333;
			.price{
				font-size: 64upx;
				color: #ECC44D;
				text{
					font-size: 32upx;
					color: #ECC44D;
				}
			}
			text{
				font-size: 22upx;
				color: #999;
			}
		}
		.footer-center{
			position: absolute;
			left: 44%;
			width: 0;
			height: 0;
			border-top: 120upx solid #333;
			border-right: 6vw solid transparent;
		}
		.footer-right{
			text-align: center;
			line-height: 120upx;
			width: 56%;
			background: linear-gradient(to left,#E9B433,#F6D376);
			font-size: 36upx;
			color: #333;
			font-weight: bold;
		}
	}
}


</style>
